<template>
  <div class="stationInfo-page">
    <a-tabs v-model:activeKey="state.tabActive" tab-position="left">
      <a-tab-pane key="1" tab="基本信息">
        <div class="station_info">
          <div class="left_info">
            <table class="tableInfo">
              <tbody>
                <tr>
                  <td class="fieldname">测站名</td>
                  <td><span>{{state.infoData!==null?state.infoData.stnm:''}}</span></td>
                  <td class="fieldname">站码</td>
                  <td><span>{{state.infoData!==null?state.infoData.stcd:''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">水系名称</td>
                  <td><span>{{state.infoData!==null?state.infoData.hnnm:''}}</span></td>
                  <td class="fieldname">河流名称</td>
                  <td><span>{{state.infoData!==null?state.infoData.rvnm:''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">启用标志</td>
                  <td><span>{{state.infoData!==null?state.infoData.usfl:''}}</span></td>
                  <td class="fieldname">在地图级别</td>
                  <td><span>{{state.infoData!==null?state.infoData.stbprplevel:''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">基面高程</td>
                  <td><span>{{state.infoData!==null?state.infoData.dtmel:''}}</span></td>
                  <td class="fieldname">至河口距离</td>
                  <td><span>{{state.infoData!==null?state.infoData.dstrvm:''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">流域名称：</td>
                  <td><span>{{state.infoData!==null?state.infoData.bsnm:''}}</span></td>
                  <td class="fieldname">交换管理单位</td>
                  <td><span>{{state.infoData!==null?state.infoData.locality:''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">建站年月</td>
                  <td><span>{{state.infoData!==null?state.infoData.esstym:''}}</span></td>
                  <td class="fieldname">基面名称</td>
                  <td><span>{{state.infoData!==null?state.infoData.dtmnm:''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">集水面积</td>
                  <td><span>{{state.infoData!==null?state.infoData.drna:''}}</span></td>
                  <td class="fieldname">测站方位</td>
                  <td><span>{{state.infoData!==null?state.infoData.stazt:''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">信息管理单位</td>
                  <td><span>{{state.infoData!==null?state.infoData.admauth:''}}</span></td>
                  <td class="fieldname">报汛等级</td>
                  <td><span>{{state.infoData!==null?state.infoData.frgrd:''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">基面修正值</td>
                  <td><span>{{state.infoData!==null?state.infoData.dtpr:''}}</span></td>
                  <td class="fieldname">站类</td>
                  <td><span>{{state.infoData!==null?state.infoData.sttp:''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">经度</td>
                  <td><span>{{state.infoData!==null?state.infoData.lgtd:''}}</span></td>
                  <td class="fieldname">纬度</td>
                  <td><span>{{state.infoData!==null?state.infoData.lttd:''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">站址：</td>
                  <td colspan="3"><span>{{state.infoData!==null?state.infoData.stlc:''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">备注：</td>
                  <td colspan="3"><span>{{state.infoData!==null?state.infoData.comments:''}}</span></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="right_map">
            <GlobalOlMap />
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import { getStbprpbInfo } from "@/api/realTime/baseData";
import { GlobalOlMap } from "@/components/GlobalOlMap";
import { addMapData } from "./addMapData";

defineOptions({ name: "StationInfo" });

const state = reactive({
  tabActive: "1",
  infoData: null,
  chartOption: null,
});

const props = defineProps({
  data: { type: Object },
  processTable: { type: Array },
});

const getStationDataInfo = async () => {
  const infoData = await getStbprpbInfo({ addvcd:'', stcd: props.data.stcd });
  state.infoData = infoData[0];
  addMapData(infoData[0]);
};

onMounted(async () => {
  await getStationDataInfo();
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.stationInfo-page {
  width: 100%;
  height: 100%;
  min-height: 500px;
  .station_info {
    height: 100%;
    display: flex;
    justify-content: space-between;
    .left_info {
      width: 50%;
      .tableInfo {
        width: 100%;
        tr td {
          border: 1px solid #eee;
          padding: 8px 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        tr td:nth-child(1),
        tr td:nth-child(3) {
          width: 15%;
          // min-width: 120px;
          background: #fafafa;
          color: #333;
        }
        tr td:nth-child(2),
        tr td:nth-child(4) {
          width: 35%;
          // min-width: 200px;
          color: #111;
        }
      }
    }
    .right_map {
      width: 49%;
      height: 100%;
    }
  }
  .content {
    width: 100%;
    height: 80%;
  }
}
</style>
